<template>
	<view class="server-main">
		<view class="top-content">
			<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			 indicator-active-color="#0081ff">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
					</view>
				</swiper-item>
			</swiper>
			<view class="bg-img bg-mask flex align-center" style="background-image: url('./static/charge-bg-2.png');height: 414upx;">
				<view class="padding-xl text-white" @tap="openMcrmbCharge()">
					<view class="padding-xs text-xxl text-bold">
						节操币充值入口
					</view>
					<view class="padding-xs text-lg">
						Only the guilty need fear me.
					</view>
				</view>
			</view>
		</view>
		<view class="main-content">
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					<text class="cuIcon-title text-blue"></text>全球市场
				</view>
			</view>
			<view class="grid col-2" @tap="goWetclandGlobalMarket()">
				<view class="bg-img padding-bottom-xl" style="background-image: url('./static/wetcland/gm-1.png');height: 207upx;">
					<view class="bg-shadeTop padding padding-bottom-xl">
						查询全球市场
					</view>
				</view>
				<view class="bg-img padding-top-xl flex align-end" style="background-image: url('./static/wetcland/gm-2.png');height: 207upx;">
					<view class="bg-shadeBottom padding padding-top-xl flex-sub">
						在游戏中进行购买或发布
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					<text class="cuIcon-title text-blue"></text>服务器数据统计
				</view>
			</view>
			<view class="grid col-2" @tap="goWetclandServerData()">
				<view class="bg-img padding-bottom-xl" style="background-image: url('./static/wetcland/data-1.png');height: 207upx;">
					<view class="bg-shadeTop padding padding-bottom-xl">
						服务器基本数据
					</view>
				</view>
				<view class="bg-img padding-top-xl flex align-end" style="background-image: url('./static/wetcland/data-2.png');height: 207upx;">
					<view class="bg-shadeBottom padding padding-top-xl flex-sub">
						>>>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					<text class="cuIcon-title text-blue"></text>服务器功能
				</view>
			</view>
			<view class="grid col-2" @tap="goWetclandServerFeature()">
				<view class="bg-img padding-bottom-xl" style="background-image: url('./static/wetcland/intro-1.png');height: 207upx;">
					<view class="bg-shadeTop padding padding-bottom-xl">
						服务器简介
					</view>
				</view>
				<view class="bg-img padding-top-xl flex align-end" style="background-image: url('./static/wetcland/intro-2.png');height: 207upx;">
					<view class="bg-shadeBottom padding padding-top-xl flex-sub">
						服务器特色
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: '/static/wetcland/wetcland-swiper-1.png'
				}, {
					id: 1,
					type: 'image',
					url: '/static/wetcland/wetcland-swiper-2.png',
				}, {
					id: 2,
					type: 'image',
					url: '/static/wetcland/wetcland-swiper-3.png'
				}, {
					id: 3,
					type: 'image',
					url: '/static/wetcland/wetcland-swiper-4.png'
				}, {
					id: 4,
					type: 'image',
					url: '/static/wetcland/wetcland-swiper-5.png'
				}, {
					id: 5,
					type: 'image',
					url: '/static/wetcland/wetcland-swiper-6.png'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: ''
			};
		},
		onLoad() {
			
		},
		methods: {
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			openMcrmbCharge() {
				window.location.href = 'http://www.mcrmb.com/cz/21858'
			},
			goWetclandGlobalMarket() {
				uni.navigateTo({
					url: 'Wetcland/WetclandGlobalMarket'
				})
			},
			goWetclandServerData() {
				uni.navigateTo({
					url: 'Wetcland/WetclandServerData'
				})
			},
			goWetclandServerFeature() {
				uni.navigateTo({
					url: 'Wetcland/WetclandServerFeature'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.server-main {
		.tower-swiper .tower-item {
			transform: scale(calc(0.5 + var(--index) / 10));
			margin-left: calc(var(--left) * 100upx - 150upx);
			z-index: var(--index);
		}
	}
</style>
